class Snake
{
    constructor(el){
        //保存地图对象
        this.el = el
        //初始时蛇的形状
        this.snakeObj = [
            { x: 3, y :2, color:'red', ele:null},  //蛇头
            { x: 2, y :2, color:'blue', ele:null}, // 蛇的身体
            { x: 1, y :2, color:'blue', ele:null}  // 蛇的身体
        ]
        //保存格子大小
        this.size = 20
        //
        this.divObj = null
        //初始方向
        this.direction = 'right'
    }


    //造蛇
    create(){
        //循环遍历蛇
        this.snakeObj.forEach((item,i)=>{
            //搭建一个蛇的div
            let divObj = document.createElement('div')
            //绝对位置
            divObj.style.position = 'absolute'
            //设置蛇节点大小
            divObj.style.width = this.size+'px'
            divObj.style.height = this.size+'px'
            //设置蛇初始位置（i是索引，表示第几个节点）
            divObj.style.left = this.snakeObj[i].x*this.size
            divObj.style.top = this.snakeObj[i].y*this.size
            //蛇的颜色
            divObj.style.backgroundColor = this.snakeObj[i].color
            //保存蛇节点对象
            this.snakeObj[i].ele = divObj
            //放到页面中
            this.el.appendChild(divObj)
        })
    }


    // 蛇水平移动
    move(){
        // 删除原位置的snake
        this.remove()
        // 蛇身移动，后面一个走前一个的位置
        for(let i = this.snakeObj.length-1;i>0;i--){
            this.snakeObj[i].x = this.snakeObj[i-1].x
            this.snakeObj[i].y = this.snakeObj[i-1].y
        }
        // 蛇头由方向来确定下一步的移动
        switch(this.direction){
            case 'right':
                this.snakeObj[0].x ++
                break;
            case 'left':
                this.snakeObj[0].x --
                break;
            case 'top':
                this.snakeObj[0].y --
                break;
            case 'bottom':
                this.snakeObj[0].y ++
                break;
        }

        //限制边界 长0-40 宽0-20
        if(this.snakeObj[0].x>=40){
            this.snakeObj[0].x=0
        }else if(this.snakeObj[0].x<0){
            this.snakeObj[0].x = 39
        }
        if(this.snakeObj[0].y>=20){
            this.snakeObj[0].y=0
        }else if(this.snakeObj[0].y<0){
            this.snakeObj[0].y = 19
            }
        //重新创建
        this.create()
}
    // 删除蛇
    remove(){
        //遍历蛇
        this.snakeObj.forEach((item,i)=>{
            //判断有蛇节对象则移除
            if(this.snakeObj[i].ele){
                this.el.removeChild(this.snakeObj[i].ele)
            }
        })
    }


}